<script lang="ts" setup>
import Back from '@img/back.png'
import BackRound from '@img/back_round.png'

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 头部是否固定
  fixed: {
    type: Boolean,
    default: true,
  },
  // 是否圆形按钮
  round: {
    type: Boolean,
    default: false,
  },
  // 背景色
  bgColor: {
    type: String,
    default: '#fff',
  },
})

const pages = getCurrentPages()

const emits = defineEmits(['back'])

function handleBack() {
  emits('back')
  uni.navigateBack({})
}

function handleBackHome() {
  uni.reLaunch({ url: '/pages/index/index' })
}
</script>

<template>
  <view class="nav-box">
    <wd-navbar
      :title="props.title"
      :fixed="fixed"
      left-arrow
      safe-area-inset-top
      :bordered="false"
      :custom-style="`background-color: ${props.bgColor}`"
    >
	
     <template #left>
        <image v-if="pages.length > 1" class="btn-back" :src="props.round ? BackRound : Back" @click="handleBack" />
		<wd-icon v-else name="home" custom-class="btn-home" size="20px" @click="handleBackHome"></wd-icon>
      </template>
	  
<!-- 	  <template #capsule>
	    <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
	  </template> -->
    </wd-navbar>
  </view>
</template>

<style lang="scss" scoped>
	.nav-box {
		:deep(.wd-navbar__left) {
			padding: 0 25px;
		}
		.no-bg {
			background-color: none;
		}
		.btn-back {
			width: 32px;
			height: 32px;
		}
		
		:deep(.btn-home) {
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			backdrop-filter: blur(10px);
			background: rgba(255, 255, 255, 0.8);
			border-radius: 50%;
		}
	}
</style>
